// 轮播图
var slide = document.getElementsByClassName('slide');
var lbtn = document.querySelector('.left');
var rbtn = document.querySelector('.right');
var circles = document.querySelectorAll('.indicator>li');
var left = slide[0].offsetLeft;
var width = document.body.clientWidth;
var index = 0;
var timer = null;


// window.onload = function(){
    autoplay();
    function autoplay(){
            timer = setInterval(function(){
            left = slide[0].offsetLeft;
            console.log(index);
            if(left==0){
                for(var i=0;i<circles.length;i++){
                    circles[i].classList.remove('li-active');
                }
                index++;
                circles[index].classList.add('li-active');
                slide[0].style.left = left-width+'px';
            }
            else if(left>(-width*3)){
                // slide[0].style.left = left - width +'px';
                for(var i=0;i<circles.length;i++){
                    circles[i].classList.remove('li-active');
                }
                index++;
                circles[index].classList.add('li-active');
                slide[0].style.left = left-width+'px';
            }
            else{
                for(var i=0;i<circles.length;i++){
                    circles[i].classList.remove('li-active');
                }
                index=0;
                circles[index].classList.add('li-active');
                slide[0].style.left = 0 +'px';
            }
        },4000)    
    }

    // lbtn.addEventListener('mouseover',clearInterval(timer))
    lbtn.addEventListener('click',pre);
    // rbtn.addEventListener('mouseover',clearInterval(timer))
    rbtn.addEventListener('click',next);
    function pre(){
        clearInterval(timer);
        left = slide[0].offsetLeft;
        if(left==0){
            slide[0].style.left = -3*width+'px';
            for(var i=0;i<circles.length;i++){
                circles[i].classList.remove('li-active');
            }
            circles[3].classList.add('li-active');
            index=3;
            setTimeout(autoplay(),2000);
            // autoplay();
        }
        else{
            // left = slide[0].offsetLeft;
            if(-left/width==1){
                index=0;
            }
            else if(-left/width==2){
                index=1;
            }
            else{
                index=2;
            }
            slide[0].style.left = left+width+'px';
            for(var i=0;i<circles.length;i++){
                circles[i].classList.remove('li-active');
            }
            circles[index].classList.add('li-active');
            setTimeout(autoplay(),2000);
            // autoplay();
        }
    }

    function next(){
        clearInterval(timer);
        left = slide[0].offsetLeft;
        if(left==(-3)*width){
            slide[0].style.left = 0 +'px';
            for(var i=0;i<circles.length;i++){
                circles[i].classList.remove('li-active');
            }
            circles[0].classList.add('li-active');
            index=0;
            setTimeout(autoplay(),2000);
        }
        else{
            if(left==0){
                index=1;
            }
            else if(-left/width==1){
                index=2;
            }
            else{
                index=3;
            }
        }
        slide[0].style.left = left-width+'px';
            for(var i=0;i<circles.length;i++){
                circles[i].classList.remove('li-active');
            }
            circles[index].classList.add('li-active');
            setTimeout(autoplay(),2000);
    }

// }


// 模块切换
var options = document.querySelector('.options');
var option = options.querySelectorAll('li');
var opMain = document.querySelectorAll('.op-main');
for(var i = 0 ; i < option.length ; i++){
    option[i].setAttribute('index',i);
    option[i].onmouseover = function(){
        for(var i = 0;i<option.length;i++){
            option[i].classList.remove('current');
        }
        this.classList.add('current');
        console.log(this);
        var index = this.getAttribute('index');
        for(var i = 0;i<opMain.length;i++){
            opMain[i].style.display='none';
        }
        opMain[index].style.display='block';
    }
}